<template>
	<view class="content">
		<u-toast ref="uToast" />
		<view class="textarea">
			<textarea auto-focus :value="value" placeholder="请输出您想要反馈的问题…" placeholder-style="fontsize: 30upx;color: #999999;"
			 style="height: 190upx;width: 100% !important;" @input="inputText" />
			 <view class="start">
				<zh-upFile :config='config' :closeImg="closeImg" :background='certImgshow' :type='0' width='165rpx' height='165rpx'
				 @upLoadFile='uploadImg' @fileListChange="fileListChange" :upFileType="2" :values="imgList"></zh-upFile>
			 </view>
		</view>
		
		<button class="mocup_btn" style="margin-top: 60upx;" @click="addReport()">提交</button>
	</view>
</template>

<script>
	import { isBlank } from '@/utils/common.js'
	import zhUpFile from '@/components/zh-upFile'
	
	export default {
		data() {
			return {
				value: '',
				imgList: [],
				certImgshow: '/static/img/img_feedBack.png',
				closeImg: '/static/img/img_delete.png',
				config: {
					count: 3, // 上传图片张数
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				},
				postData: {
					token: '',
					key: ''
				},
			}
		},
		components: {
			'zh-upFile': zhUpFile
		},
		methods: {
			inputText(e) {
				this.value = e.detail.value
			},
			uploadImg(file) {
				var _this = this
				
				uni.showLoading({
					title: '上传中...'
				});
				
				let tempFilePaths = file.tempFilePaths
				
				_this.$u.api.getPostingQiniuToken().then(res => {
					if (res.code === 200) {
						_this.postData.token = JSON.parse(res.data).qiniuToken
						// 开始上传
						for (var i = 0; i < tempFilePaths.length; i++) {
							_this.postData.key = _this.$u.guid() // 随机key	
				
							uni.uploadFile({
								url: 'https://upload-Z2.qiniup.com', //华南地区用这个
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'key': _this.postData.key,
									'token': _this.postData.token
								},
								success: (uploadFileRes) => {
									let img = "https://posting.imguangguang.com/" + JSON.parse(uploadFileRes.data).key
									let arr = {
										url: img
									}
									
									if (_this.imgList.length >= 3) {
										uni.showToast({
											title: "最多上传3张图片",
											icon: "none"
										})
										uni.hideLoading()
										return false
									}
									
									_this.imgList.push(arr)
								},
								fail: (error) => {
									if (error && error.response) {
										uni.showToast({
											title: error.response,
											icon: 'none'
										})
									}
								},
								complete: () => {
									setTimeout(function() {
										uni.hideLoading();
									}, 250);
								},
							});
						}
					}
				})

			},
			// 删除图片
			fileListChange(data) {
				this.imgList = data.fileList
			},
			addReport() {		
				if(this.value.length === 0) {
					uni.showToast({
						title: "请先输入内容",
						icon: "none"
					})
					return false
				}
				
				var data = { 
					type: 1, // 0.投诉 1.反馈
					content: this.value
				}
				
				if(!isBlank(this.imgList)) {
					let list = []
					for(let i in this.imgList) {
						list.push(this.imgList[i].url.replace("https://posting.imguangguang.com/",""))
					}
					data.photos = JSON.stringify(list)
				}
				
				console.log(data)
				
				uni.showLoading({
				    title: '正在提交'
				});
				
				this.$u.api.addReport(data).then(res => {
					uni.hideLoading()
					if(res.code === 200) {
						this.$refs.uToast.show({
							title: '反馈成功',
							type: 'success',
							position: 'top',
							back: true,
							duration: '500'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #F7F8FA;
		height: 100%;
	}
	
	.content {
		padding: 32upx 30upx;
		.textarea {
			padding: 27upx 24upx;
			border-radius: 20upx;
			background: #FFFFFF;
		}
		.start {
			margin-top: 28upx;
		}
	}
	
</style>
